<template>
  <div class="index-header-layout">
    <div class="index-header sha1" :class="{'is-transparentBg': bIsTp}">
      <el-row class="ad-header-top">
        <el-col class="ad-header-top-logo" :span="19">
          <img v-if="!bIsTp" :src="`${env.publicPath}images/logo-1.png`" alt="" @click.stop="onHome">
          <router-link v-if="bIsTp" to="/"><img :src="`${env.publicPath}images/logo-0.png`" alt=""></router-link>
        </el-col>

        <el-col v-if="bIsLogined" class="ad-header-top-btns" :span="3">
          <el-button
            v-if="arrBtns[0]"
            class="ad-header-top-btn"
            :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}"
            @click.stop="onHome">
            <el-icon><i class="jy-icon-home"></i></el-icon>
              返回首页
              <!-- <router-link to="/">返回首页</router-link> -->
          </el-button>

          <el-button
            v-if="arrBtns[1]"
            @click.stop="onSetting"
            class="ad-header-top-btn"
            :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}">
            <el-icon><i class="jy-icon-edit"></i></el-icon>
              作品设置
          </el-button>

          <!-- <el-button v-if="arrBtns[2]" @click.stop="onSaveCover" class="ad-header-top-btn" :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}" icon="jy-icon-save">
              保存封面
          </el-button> -->

          <el-popconfirm v-if="arrBtns[2]" icon="InfoFilled" iconColor="red" title="亲，没事别总保存封面！！" @confirm="onSaveCover">
            <template #reference>
              <el-button class="ad-header-top-btn" :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}"><el-icon><i class="jy-icon-save"></i></el-icon> 保存封面</el-button>
            </template>
          </el-popconfirm>

          <el-button
            v-if="arrBtns[3]"
            @click.stop="onPreview"
            class="ad-header-top-btn"
            :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}">
            <el-icon><i class="jy-icon-save"></i></el-icon>
              保存站点
          </el-button>

          <el-button
            v-if="status && arrBtns[5]"
            @click.stop="onLine"
            class="ad-header-top-btn"
            :class="{'is-transparent': bIsTp, 'is-bordernone': bIsTp}">
              <el-icon class="el-icon--left"><i :class="status && status == '1' ? 'jy-icon-offline' : 'jy-icon-post'"></i></el-icon>
              <!-- jy-icon-post / jy-icon-offline -->
              {{ status && status == '1' ? '下线' : '上线' }}
          </el-button>

          <!-- @click.stop="onDocument" -->
          <el-button
            class="ad-header-top-btn">
            <a href="https://www.yuque.com/volcaner/bq7g2d/001" target="_blank">帮助</a>
          </el-button>

          <el-button
            v-if="arrBtns[4]"
            class="ad-header-top-btn ad-header-top-btn-hover"
            :class="{'is-transparent': bIsTp, 'is-border0': bIsTp}"
            >
              <el-icon class="el-icon--left"><i class="jy-icon-my-template"></i></el-icon>
              <router-link to="/admin">我的作品</router-link>
          </el-button>
        </el-col>

        <el-col v-if="bIsLogined" :span="2" class="ad-header-top-mine">
          <div class="mine-dropdown">
            <div class="mine-dropdown-header opened">
              <p class="mine-img-area">
                <span class="mine-img-box">
                  <i class="mine-img" :style="{backgroundImage: `url(` + user.headpic + `)`}"></i>
                  <!-- <img class="mine-pic" :src="user.headpic" alt=""> -->
                </span>
              </p>
              <!-- <i class=" el-icon-arrow-up"></i> -->
              <el-icon class="mine-arrow"><arrow-up /></el-icon>
            </div>

            <div class="mine-dropdown-sub mine-box">
              <el-menu :default-openeds="['1']">
                <el-menu-item-group>
                  <template #title>{{user.name}}</template>
                  <el-menu-item index="1-1" @click="onAdmin">
                    <a href="javascript:;"><i class="jy-icon-list"></i> 我的作品</a>
                  </el-menu-item>
                  <el-menu-item index="1-2" @click="onTemp">
                    <a href="javascript:;"><i class="jy-icon-my-template"></i> 模板列表</a>
                  </el-menu-item>
                  <hr style="margin: 10px 2px 2px 2px; color: #aaa;"/>
                  <el-menu-item index="1-3" @click="click2ResetPassword">
                    <a href="javascript:;"><i class="jy-icon-locking"></i> 更改密码</a>
                  </el-menu-item>
                  <el-menu-item index="1-4" @click="click2Logout">
                    <a href="javascript:;"><i class="jy-icon-withdraw"></i> 退出登录</a>
                  </el-menu-item>
                </el-menu-item-group>
              </el-menu>
            </div>
          </div>
        </el-col>

        <el-col v-if="!bIsLogined" :span="5" class="ad-header-top-btns is-not-login-btns">
          <el-button
            class="ad-header-top-btn"
            :class="{'is-not-login-btn': !bIsTp, 'is-not-login-btn-t': bIsTp, 'is-white': bIsTp, 'is-blue': !bIsTp, 'is-bordernone': bIsTp, 'no-border': bIsTp}"
            @click.stop="click2Login">登录</el-button>
          <el-button
            class="ad-header-top-btn"
            :class="{'is-not-login-btn': !bIsTp, 'is-not-login-btn-t': bIsTp, 'is-transparent': bIsTp, 'is-bordernone': bIsTp, 'has-border': bIsTp}"
            @click.stop="click2Regist">注册</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { useWebUserStore } from '@/store/web/user'
import { EventBus } from '@/utils/'

export default {
  name: 'IndexHeader',
  // options:
  //  - arrBtns: 按钮显示/隐藏
  //  - transparent: 透明背景
  props: ['options', 'isEnterEdit'],
  computed: {
    user() {
      const useWebUser = useWebUserStore()
      return useWebUser.user
    },
    bIsLogined() {  // 判断是否登录？
      const useWebUser = useWebUserStore()
      return useWebUser.user && _.keys(useWebUser.user.userid).length > 0
    },
    arrBtns() {  /* [1, 0, 0, 0, 0, 0] 返回首页 / 作品设置 / 保存封面 / 保存/预览/发布 / 我的作品 / 上/下线 */
      if(!this.options || !this.options.arrBtns) {
        return [1, 0, 0, 0, 0, 0];
      }
      return this.options.arrBtns;
    },
    bIsTp() {  // 是否 透明背景
      if(!this.options) return false;
      return this.options.transparent;
    },
    status() {  // online 2-下线，1-上线
      if(!this.options) return false;
      return this.options.status;
    },
  },
  created() {
    const useWebUser = useWebUserStore()
    useWebUser.initUserInfo()
  },
  methods: {
    /* 跳转 */
    // TODO: 是否保存数据？
    onHome() {
      // @ts-ignore
      if(this.isEnterEdit) this.emit('onHome');
      else this.$router.push('/');
    },
    onAdmin() {
      // @ts-ignore
      if(this.isEnterEdit) this.emit('onAdmin');
      else this.$router.push('/admin/produ');
    },
    onTemp() {
      // @ts-ignore
      if(this.isEnterEdit) this.emit('onTemp');
      else this.$router.push('/admin/temp');
    },
    onDocument() {
      // @ts-ignore
      if(this.isEnterEdit) this.emit('onDocument');
      else this.$router.push('/doc');
    },

    /* 设置 */
    onSetting() {  // TODO: 只提供接口
      this.$emit('setting');
    },

    /* 数据保存 */
    // TODO: appkey?  isDisplaySetAppkey  bIsAppkeyNull  bIsWbAppkeyChecked
    onSaveCover() {  // TODO: 只提供接口
      // 保存封面
      this.$emit('saveCover');
    },
    onPreview() {  // TODO: 只提供接口
      // 保存/预览/发布
      this.$emit('preview');
    },
    onLine() {  // 只提供接口
      // online 2-下线，1-上线
      this.$emit('online');
    },

    /* 登录/退出 */
    click2Login() {
      EventBus.$emit("login");
    },
    click2Regist() {
      EventBus.$emit("register");
    },
    click2Logout() {
      let link = '#/';
      const useWebUser = useWebUserStore()
      useWebUser.logout({
        jumpLink: encodeURIComponent(link),
      })
    },
    click2ResetPassword() {
      EventBus.$emit('ReserPasswordLayoutShow', true)
    },
  },
}
</script>

<style lang="scss">
  @-webkit-keyframes morph {
    0% {
      border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @keyframes morph {
    0% {
      border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @-webkit-keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  .mine-img-area {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    vertical-align: middle;
    // animation: spin 12s linear infinite;

    .mine-img-box {
      position: relative;
      display: inline-block;
      width: 34px;
      height: 34px;
      margin-right: 10px;
      vertical-align: middle;
      border: 1px solid transparent;
      transition: border-radius 1s ease-out;
      border-radius: 50%;
      // border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      // animation: morph 8s ease-in-out infinite both alternate;
      overflow: hidden;

      .mine-img {
        position: absolute;
        // left: -20%;
        // top: -20%;
        display: block;
        // width: 140%;
        // height: 140%;
        width: 100%;
        height: 100%;
        background-size: cover;
        // animation: spin 12s linear infinite reverse;
      }
    }
  }
  .mine-dropdown-sub{
    .el-menu-item *{
      vertical-align: middle;
    }
  }
</style>
